<template>
    <div class="loginPage">
        <h3>登录页</h3>
        <el-form :rules="rules" :model="loginDate" ref="loginForm">
          <el-form-item prop="username">
              <el-input type="text" placeholder="用户名称" v-model="loginDate.username"></el-input>
          </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" placeholder="用户密码" v-model="loginDate.password"></el-input>
            </el-form-item>
            <el-form-item >
                <el-checkbox>记住密码</el-checkbox>
            </el-form-item>
            <el-form-item >
                <el-button class="loginBtn" type="primary" @click="submitLogin">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                loginDate:{
                    username:"root",
                    password:"123456"
                },
                rules:{
                      username:[
                          { required:true,message:'请输入用户名',trigger:'blur'}
                      ],
                      password:[
                            { required:true,message:'请输入用密码',trigger:'blur'},
                          {min:6,max:12,message: "长度在6~12位之间",trigger:"blur"}
                      ],
                    }
            }
        },
        methods:{
            submitLogin(){
                this.$refs['loginForm'].validate((valid)=>{
                    if(valid){
                        if (this.loginDate.username=='root'&&this.loginDate.password=='123456'){
                            window.sessionStorage.setItem('loginer',JSON.stringify(this.loginDate));
                            this.$router.replace('/home');
                        }else{
                            this.$message.error('用户名或者密码错误请重新填写')
                        }
                    }else{
                        this.$message.warning('请正确填写用户名和密码！')
                        return false;
                    }
                })
            }

        }
    }
</script>

<style scoped>
    .loginPage{
        width: 420px;
        margin: 200px auto;
        border: 1px solid #d9d9d9;
        padding: 20px;
        border-radius: 15px;
        box-shadow: 0 0 25px #898989;
    }
    .loginPage h3{
        text-align: center;
    }
    .loginBtn{
        width:100%;
    }

</style>